<template>
    <router-link
        v-if="checkRouteType(itemsChild) === 'link'"
        :to="wrapRouterLink(itemsChild)"
        replace
    >
        <el-menu-item :index="wrapRouterPath(itemsChild.routerName)">
            <div class="menu-right" :title="itemsChild.menuName">
                <i v-if="showIcon(itemsChild)" :class="item.menuIcon" class="menu-icon"></i>
                <span v-if="itemsChild.menuName">{{ itemsChild.menuName }}</span>
            </div>
        </el-menu-item>
    </router-link>
    <el-submenu
        v-else-if="checkRouteType(itemsChild) === 'sub' "
        :ref="itemsChild.menuName"
        :key="itemsChild.menuName"
        :index="itemsChild.menuName || itemsChild.routerName"
        :title="itemsChild.menuName"
        class="menu-icon-li"
        @click.native="handleSubmenuItem(itemsChild.menuName)"
    >
        <template slot="title">
            <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
            <span v-if="itemsChild.menuName" slot="title">{{ itemsChild.menuName }}</span>
        </template>
        <template v-for="itemsss in itemsChild.child">
            <side-bar-items :key="itemsss.menuName" :itemsChild="itemsss"></side-bar-items>
            <!-- <side-bar-items :itemsChild="itemsss" :key="itemsss.menuName"></side-bar-items> -->
        </template>
    </el-submenu>
</template>
<script>
import SideBarItem from './SideBarItem';
import { isEmpty } from '@/utils/Common';
import { eachProp } from '@/utils/Object';
export default {
    name: 'SideBarItems',
    props: {
        itemsChild: {
            type: Object
        }
    },
    data() {
        return {

        }
    },
    components: {
        SideBarItem
    },
    methods: {
        handleSubmenuItem(menuName) {
            console.log("item");
            let submenuDiv = this.$refs[menuName];
            submenuDiv.popperElm.style.position = "relative";
            submenuDiv.popperElm.style.left = '0px';
        },
        // 检查某个路由节点是叶子菜单还是非叶子菜单（叶子菜单：可以直接点击路由到某个链接）
        checkRouteType(route) {
            // 如果没有子路由，则一定是叶子菜单
            if (!route.child || route.child.length === 0) {
                return 'link';
            }

            // 如果具有子路由，检查子路由中非隐藏路由的个数
            let flag = 0;
            eachProp(route.child, (child) => {
                if (!child.hidden) {
                    flag += 1;
                }
            });

            if (flag === 0) {
                // 如果子路由都是隐藏路由，则父路由显示为叶子菜单
                return 'link';
            }
            // console.log('route.name'+route.menuName);
            return 'sub';
        },
        wrapRouterLink(item) {

            const route = {
                params: {
                    jumpFlag: true,
                },
            };

            if (item.name) {
                route.name = item.name;
            } else if (item.routerName) {
                route.path = this.wrapRouterPath(item.routerName);
            } else {
                route.path = '/404';
            }

            return route;
        },
        wrapRouterPath(path) {
            if (isEmpty(path)) {
                return '';
            }
            if (path.charAt(0) !== '/') {
                return `/${path}`;
            }
            return path;
        },
        showIcon(item) {
            return item.menuIcon && !isEmpty(item.menuIcon);
        },
    }
}
</script>

<style lang='scss'>
/* .el-menu--popup-right-start>.menu-icon-li>.el-menu--horizontal{
        position: absolute !important;
        top: 5px !important;
        left: 0px !important;
        width: 90% !important;
        &>ul{
            box-shadow:none;
            &>a>li.el-menu-item{
                margin-left: 8px;
            }
            &>a>li.el-menu-item:hover{
                    background-color: #a0cfff;
            }
            &>a>li.is-active{
                 background-color: #a0cfff;
                 div span{
                     color:#fff !important;
                 }
            }
        }
    } */
</style>